const code = `{
    // 同props的name属性
    name: 'TableName',

    // 表格请求配置，可以是一个对象如下，也可以只写一个函数，相当于requestApi.handler
    requestApi: {
      // 获取表格数据，第一个参数query包含搜索栏的查询参数、额外请求参数、以及页数和条数
      // 返回一个promise
      async handler(query) {
        return request(query)
      },
      // 表格显示的数据条数，默认20，可以使用setPageSize修改全局默认条数
      // import { setPageSize } from 'wjc-easy-element-ui'; setPageSize(10);
      pageSize: 20,
      // 请求成功回调
      onSuccess: (res) => console.log(res),
      // 请求错误回调
      onError: (err) => console.log(err),
      // 请求完成回调
      onComplete: () => console.log('请求完成'),
    },

    // 提供了此配置会显示删除按钮，可以是一个对象，配置如下
    // 也可以是一个函数，就相当于delete.handler
    delete: {
      // 执行删除操作的方法，第一个参数data为被点击的表格行的数据，需要return一个promise
      handler: async(data) => deleteApi({ id: data.id }),
      // 按钮名，默认‘删除’
      name: '删除',
      // 绑定给el-button的属性，默认为：{ type: 'danger' }
      options: {},
      // 点击删除时，是否二次确认，默认为'确认删除吗？'
      // 不需要二次确认则：{ confirm: false }
      // 修改二次确认提示文字则：{ confirm: '你确定要删除这个吗？' }
      confirm: '确认删除吗？'
    },

    // 表格操作列的配置
    handle: {
      // 操作列按钮尺寸，默认mini
      btnSize: 'mini',
      // 操作列按钮配置
      items: [
        {
          // 按钮名
          name: '按钮名',
          // 按钮的点击事件，第一个参数data为表格行对应的数据
          // 第二个参数的showLoading和cancelLoading控制按钮的loading状态，
          // setData用于设置此表格行数据，setData('state', 1)
          click: (data, { showLoading, cancelLoading, setData }) => {
            console.log(data)
          },
          // 动态加载按钮的名字和属性，第一个参数data为表格行对应的数据
          dynamicLoad(data) {
            if (data.isDanger) {
              this.name = '按钮1'
              this.options.type = 'danger'
            } else {
              this.name = '按钮2'
              this.options.type = 'success'
            }
          },
          // 是否显示按钮，第一个参数data为表格行对应的数据
          show: (data) => data.state === 2,
          // 绑定给el-button的属性，默认为：{ type: 'primary' }
          options: { plain: true }
        }
      ],
      // 操作列宽度
      width: 250,
      // 绑定给操作列对应的el-table-column的属性
      // 默认为：{ fixed: 'right', align: 'left', resizable: false }
      options: { fixed: 'right', align: 'left', resizable: false },
    },

    // 表格列配置
    columns: [
      {
        // 对应el-table-column的prop属性
        prop: 'prop',
        // 对应el-table-column的label属性
        label: 'label',
        // 字典，可以是一个数组（Array<{ label: string, value: any, color?: string }>）
        // 也可以是一个函数返回这个数组，支持异步
        // color用于配置文字的显示颜色
        dicts: [
          { label: 'xxx', value: 1, color: '#FFFFFF' }
        ],
        // el-table-column的属性
        options: { width: 250 },
        // 对应el-table-column的width属性
        width: 250,
        // 自定义渲染内容，可用jsx
        // 当配置了dicts时，value为使用dicts转化过的值，
        // 且dicts存在color属性的话，也同样可以在render函数的第二个参数中获得，
        // el-table-column的默认插槽的参数也可以在render函数的第二个参数中获得
        render: (h, { value, color, row, $index }) => (
          <div>{value}</div>
        ),
        // 转化值，当需要对表格的值做简单处理时，像格式化日期、金额等等，使用此配置
        transform: val => formatPrice(val)
      }
    ],

    // 绑定给el-table的参数
    options： {
      border: false,
      size: 'small'
    },

    // 绑定给el-table的监听事件
    listeners: {
      // key也支持这样写selectAll
      'select-all': (arg) => console.log(arg),
    },

    // 给请求添加的额外参数，会被加到requestApi.hander的query中
    extraRequestParams: { _t: +new Date() },

    // 是否默认表格一加载好，就调用requestApi.handler请求数据，默认为true
    immediate: true,

    // 字段在请求返回数据中的路径
    // 例如请求返回数据为：{ data: { list: [], count: 0, pages: 0, pageSize: 0 }, errCode: 0 }
    // 则fieldsMap的配置为: { list: 'data.list', totalCount: 'data.count', totalPages: 'data.pages', pageSize: 'data.pageSize' }
    // 默认值为{ list: 'data', totalCount: 'count', totalPages: 'pages', pageSize: 'pageSize' }
    // 默认同样可以使用setFieldsMap修改，例如
    // import { setFieldsMap } from 'wjc-easy-element-ui'; setFieldsMap({ list: 'data.data' });
    fieldsMap: {
      // 请求返回的列表
      list: 'data',
      // 请求返回的总条数
      totalCount: 'count',
      // 请求返回的总页数
      totalPages: 'pages',
      // 请求返回的页条数
      pageSize: 'pageSize'
    },

    // 自定义表格内容为空或者加载出错时的内容，支持jsx
    // isError表示加载是否出错，refresh是一个函数，调用了会重新去获取数据
    emptyContentRender(h, { isError, refresh }) {
      return isError ? (
        <div onClick={refresh}>错误</div>
      ) : (
        <div>空内容</div>
      )
    },

    // 是否使用列设置，当设置了表格的name属性时，列设置会使用storage缓存
    useSetting: true
}`


export const TableConfigDesc = {
  template: `
  <el-card header="tableConfig 对象结构" id="TableConfigDesc">
    <pre>
      <code>{{ code }}</code>
    </pre>
  </el-card>
  `,

  data() {
    return {
      code
    }
  }
}